<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2025-02-22 10:24:43
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-02-28 10:12:50
 * @FilePath: \web-appc:\Users\wuheng\Desktop\WugangNew\src\centerViews\dashboard\components\todaydata.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="Todaydata" :style="{ marginLeft: index == 0 ? 0 : '48px' }">
    <div class="Todaytop flex">
      <div class="imgbox" :style="{ 'background': Todaydata.background }">
        <img :src="getImageUrl(index)" alt="">
      </div> <span class=" Todayspan1">{{ Todaydata.text1 }}</span>
    </div>
    <div class="Todaycenter" :style="{ 'borderRight': Todaydata.borderflge ? '' : '1px solid rgba(0, 0, 0, 0.1)' }">
      {{ Todaydata.amout }}<span class="Todayspan1">{{ Todaydata.unit }}</span>
    </div>
    <div class="flex items-center">
      <span class="Todayspan1" style="margin-left: 0;">同比昨日</span><span class="Todayspan2"
        :style="{ 'color': Todaydata.TrendType == 1 ? '#F52F3E' : Todaydata.TrendType == -1 ? 'rgba(9, 181, 98, 1)' : '' }">{{
          Todaydata.Trend
        }}</span><pb-icon name="forward" size="16" v-show="Todaydata.TrendType == 1"></pb-icon><pb-icon
        v-show="Todaydata.TrendType == -1" name="down" size="18"></pb-icon>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  Todaydata: {
    type: Object,
    default: {}
  },
  index: {
    type: Number,
    default: 0
  }
})
const getImageUrl = (index: any) => {
  // Vite 专用动态路径写法
  return new URL(`../../../assets/images/home${index + 1}.png`, import.meta.url).href
}
</script>
<style lang="scss" scoped>
.Todaydata {
  margin-top: 24px;
  width: 25%;

  .Todaytop {
    align-items: center;
    margin-bottom: 8px;

    .imgbox {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;

      >img {
        width: 18px;
        height: 18px;
      }
    }

  }

  .Todaycenter {
    height: 48px;
    margin-bottom: 8px;
    font-family: DIN, DIN;
    font-weight: bold;
    font-size: 32px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 48px;
    width: 100%;
    ;
  }

  .Todayspan1 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    margin-left: 8px;
  }

  .Todayspan2 {
    font-family: DIN, DIN;
    font-weight: 400;
    font-size: 12px;
    // color: #F52F3E;
    margin-left: 8px;
  }
}
</style>
